<template>
  <div>
    <van-nav-bar
        title="优惠卷"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-tabs v-model:active="active">
      <van-tab title="领劵中心" style="margin: 20px">
        <div
            style="background-color: #ffa72c;width: 93%;height: 120px;margin-top: 10px"
            v-for="item in showList"
        >
          <div>
            <span style="line-height: 55px;color: white">￥</span><span style="font-size: 35px;color: white">{{parseFloat(item.amount).toFixed(2)}}</span>
            <span style="margin-top: 20px;color: white">{{item.couponName}}</span>
            <br>
            <br>
            <br>
            <span style="margin-left: 9px;color: white">
              满{{item.conditionAmount}}元可用
              <br>
              有效期：{{item.startTime}}至{{item.endTime}}
            </span>
            <div style="display: flex; justify-content: flex-end;">
              <van-button style="margin-top: -20px">立即领取</van-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <br>
            <div style="display: flex; justify-content: flex-end;height: 100%">
              <span style="width: 100px;height: 30px;margin-top: -5px;margin-left: 10px;color: white">仅剩{{item.receiveCount}}张</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="我的优惠卷">

        <div
            style="background-color: #ffa72c;width: 93%;height: 120px;margin-top: 10px"
            v-for="item in showList"
        >
          <div>
            <span style="line-height: 55px;color: white">￥</span><span style="font-size: 35px;color: white">{{parseFloat(item.amount).toFixed(2)}}</span>
            <span style="margin-top: 20px;color: white">{{item.couponName}}</span>
            <br>
            <br>
            <br>
            <span style="margin-left: 9px;color: white">
              满{{item.conditionAmount}}元可用
              <br>
              有效期：{{item.startTime}}至{{item.endTime}}
            </span>
            <div style="display: flex; justify-content: flex-end;">
              <van-button style="margin-top: -20px">立即领取</van-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <br>
            <div style="display: flex; justify-content: flex-end;height: 100%">
              <span style="width: 100px;height: 30px;margin-top: -5px;margin-left: 10px;color: white">仅剩{{item.receiveCount}}张</span>
            </div>
          </div>
        </div>

      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {findCoupon, findCouponUserList} from "@/api/category/category";

export default {
  data() {
    return {
      showList: [],
      active:0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/wode')
    },
    findCouponUser(){
      findCouponUserList().then(res => {
        this.showList = res.data
      })
    },
    findCouponList() {
      findCoupon().then(res => {
        this.showList = res.data
      })
    }
  },
  created() {
    this.findCouponList()
    this.findCouponUser()
  }
}

</script>

<style>

</style>
